<template>
  <div class="post">
     <el-form :model="from" :rules="rules" class="fro" ref="refg">
        <el-form-item prop="phone">
          <el-input
            placeholder="请输入内容"
            prefix-icon="iconfont icon-kejituandui"
            v-model.number="from.phone"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            placeholder="请输入内容"
            prefix-icon="iconfont icon-gouwuche"
            v-model="from.password"
            show-password
          >
          </el-input>
        </el-form-item>
        <el-form-item class="rr">
          <el-button type="danger" round @click="deref">注册</el-button>
          <el-button type="danger" round @click="refget">重置</el-button>
        </el-form-item>
      </el-form>
  </div>
</template>
<script>


export default {
   name:'Post',
  data() {
 // 验证规则
     var checkNum= (rules, value, callback) => {
       const reg=/^(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
        if ( reg.test(value)) {
         return callback()
        }else{
        callback(new Error('不正确的手机号码'));
    }
      };


    return{
      from:{
         phone:'',
        password:""
        },
        // 验证规则
      rules: {
        phone: [
          { required: true, message: '不能为空'},
          { type: 'number', message: '必须为数字值'},
          { validator: checkNum, trigger: 'blur' }
        ],
        password: [
          { required: true, message: "请输入", trigger: "blur" },
          { min: 3, max: 16, message: "长度在 3 到 16 个字符", trigger: "blur" },
        ],
      },
    
  
    
    }
  },
  methods:{
    // 重置
     refget() {
      this.$refs.refg.resetFields();
    },
    // 登录
    deref(){
        this.$refs.refg.validate(async (valid) => {
        // valid表示布尔
      //  如果表单验证失败则停止运行
        if (!valid) return;                
           this.$http.get("/api/login/refresh").then(res=>{
             this.$message.success('注册成功')
           console.log(res);
         })
        
        });
    }

  }
}
</script>


<style lang="less" scoped>
.post{
  /deep/.el-input__inner{
  border-radius: 3px;
  
  outline: none;
}
}


</style>
